<template>
	<view class="index">
		<view class="item-wrapper" v-for="(item,index) in list" :key="index" @click="goDetail(item)">
			<view class="base-info">
				<view class="name-wrapper">
					<view class="name">
						<text>姓名：{{ item.staffName }}</text>
						<text v-if="item.isAdmin">（管理员）</text>
						<text v-else>（员工）</text>
					</view>
					<view v-if="item.state === 0" class="status">
						正常
					</view>
					<view v-if="item.state === 1" class="status red">
						已禁用
					</view>
					<uni-icons type="right" size="18" color="#999999"></uni-icons>
				</view>
				<view class="phone">
					手机：{{ item.staffTel }}
				</view>
			</view>
			<view class="permission-wrapper">
				<view v-if="item.isAdmin" class="permission-item">
					管理员：所有权限
				</view>
				<view v-if="!item.isAdmin && item.cityWarehouseMarketing" class="permission-item">
					销售：{{ item.cityWarehouseMarketing }}
				</view>
				<view v-if="!item.isAdmin &&item.cityWarehouseLogistics" class="permission-item">
					物流：{{ item.cityWarehouseLogistics }}
				</view>
				<view v-if="!item.isAdmin &&item.cityWarehouseSettlement" class="permission-item">
					结算：{{ item.cityWarehouseSettlement }}
				</view>
				<view v-if="!item.isAdmin &&item.cityWarehouseManagement" class="permission-item">
					管理：{{ item.cityWarehouseManagement }}
				</view>
			</view>
		</view>

		<view class="add-btn" @click="add">
			添加账号
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: []
			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			async getTree() {
				const data = await this.$api.post('/app/city-warehouse-staff-permission/list-tree')
			},
			async getList() {
				const data = await this.$api.post('/app/city-warehouse-staff/page', {
					pageSize: 50,
					pageNum: 1,
					orders: [{
						"asc": true,
						"column": "id"
					}]
				})
				if (data.code === 200) {
					const cityWarehouseMarketing = [{
						label: '客户管理',
						code: 'customer:management'
					}, {
						label: '订货单',
						code: 'order:form'
					}, {
						label: '商品经营',
						code: 'product:selection'
					}, {
						label: '代金券',
						code: 'voucher'
					}]
					const cityWarehouseSettlement = [{
						label: '资金结算',
						code: 'fund:settlement'
					}, {
						label: '售后退款',
						code: 'refund:after:sale'
					}, {
						label: '违约扣款',
						code: 'fine:management'
					}]
					const cityWarehouseLogistics = [{
						label: '运输管理',
						code: 'transportation:management'
					}, {
						label: '分货管理',
						code: 'scan:code:divide:goods'
					}, {
						label: '客户提货',
						code: 'customer:pick-up'
					}, {
						label: '提货单',
						code: 'bill:of:lading'
					}]
					const cityWarehouseManagement = [{
						label: '账号权限',
						code: 'account:authority'
					}, {
						label: '经营报表',
						code: 'operating:statement'
					}]
					data.data.records.forEach(item => {
						if (item.permissionCode) {
							item.permissionCode = item.permissionCode.split(',');
							item.cityWarehouseMarketing = [];
							item.cityWarehouseSettlement = [];
							item.cityWarehouseLogistics = [];
							item.cityWarehouseManagement = [];
							item.permissionCode.forEach(row => {
								let obj = cityWarehouseMarketing.find(rows => rows.code === row)
								if (obj) {
									item.cityWarehouseMarketing.push(obj.label)
								}
								obj = cityWarehouseSettlement.find(rows => rows.code === row)
								if (obj) {
									item.cityWarehouseSettlement.push(obj.label)
								}
								obj = cityWarehouseLogistics.find(rows => rows.code === row)
								if (obj) {
									item.cityWarehouseLogistics.push(obj.label)
								}
								obj = cityWarehouseManagement.find(rows => rows.code === row)
								if (obj) {
									item.cityWarehouseManagement.push(obj.label)
								}
							})
							item.cityWarehouseMarketing = item.cityWarehouseMarketing.join()
							item.cityWarehouseSettlement = item.cityWarehouseSettlement.join()
							item.cityWarehouseLogistics = item.cityWarehouseLogistics.join()
							item.cityWarehouseManagement = item.cityWarehouseManagement.join()
						}
					})
					this.list = data.data.records;
				} else {
					uni.showToast({
						title: data.msg,
						icon: 'none',
						duration: 2000
					})
				}
			},
			async getPermissons() {
				const data = await this.$api.post('/app/supplier-staff-permission/list-tree', {}, false)
				this.permissions = data.data;
				this.getList()
			},
			goDetail(item) {
				uni.navigateTo({
					url: '/subPage_staff/staffDetail?params=' + JSON.stringify(item)
				})
			},
			add() {
				uni.navigateTo({
					url: '/subPage_staff/addStaff'
				})
			}
		},
		components: {

		}
	}
</script>

<style lang="scss" scoped>
	.index {
		height: 100%;
		overflow: auto;
		padding: 0 24upx;
		padding-bottom: 140upx;

		.item-wrapper {
			background-color: #fff;
			border-radius: 10upx;
			margin-top: 20upx;
			padding: 24upx;

			.base-info {
				border-bottom: 1upx dashed #dedede;
				padding-bottom: 20upx;

				.name-wrapper {
					display: flex;
					align-items: center;
					margin-bottom: 10upx;

					.name {
						flex: 1;
					}

					.status {
						color: #03bc38;

						&.red {
							color: red;
						}
					}
				}
			}

			.permission-wrapper {
				padding-top: 10upx;

				.permission-item {
					margin-top: 10upx;
				}
			}
		}

		.add-btn {
			position: fixed;
			height: 90upx;
			width: 100%;
			bottom: 0;
			left: 0;
			background-color: #F26022;
			color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 1;
		}
	}
</style>